<template>
	<div class="q-pa-md">
		<!-- 添加搜索工具栏 -->
		<div class="q-mb-md">
			<q-input
				v-model="searchKeyword"
				placeholder="请输入搜索关键词"
				dense
				@update:model-value="handleSearch"
				style="width: 300px; margin-right: 10px"
			>
				<template #append>
					<q-icon name="search" />
				</template>
			</q-input>
		</div>

		<vxe-table :data="rowData" border>
			<vxe-column type="seq" title="序号" width="60" header-align="center" align="center"></vxe-column>
			<vxe-column field="sqnr" title="授权内容" width="80%" header-align="center">
				<template #default="{ row }">
					<span v-html="formatLinks(row.sqnr)"></span>
				</template>
			</vxe-column>
			<!-- <vxe-column field="requestId" title="流程识别" header-align="center" align="center"></vxe-column> -->
			<vxe-column field="lastname" title="发起人" header-align="center" align="center"></vxe-column>
			<!-- 根据实际数据字段添加更多列 -->
		</vxe-table>

		<!-- 添加分页组件 -->
		<vxe-pager :current-page="pagerConfig.currentPage" :page-size="pagerConfig.pageSize" :total="pagerConfig.total"
			:page-sizes="[10, 20, 50, 100]" @page-change="handlePageChange" class="q-mt-md"></vxe-pager>
	</div>
</template>

<script>
// 修改导入语句
import VXETable from 'vxe-table'
import { VxePager } from 'vxe-table'
import 'vxe-table/styles/index.scss'


export default {
	data() {
		return {
			usr:{},
			rowData: [],
			// 新增搜索关键词
			searchKeyword: '',
			// 新增分页相关数据
			pagerConfig: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			},
			searchTimer: null // 新增定时器存储
		};
	},
	async mounted() {
		this.user=this.$TOOL.data.get("USER_INFO")
		await this.loadData(this.user.userId);
	},
	methods: {
		// 修改后的数据加载方法
		async loadData(userId) {
			this.$q.loading.show();
			const { currentPage, pageSize } = this.pagerConfig;
			const res = await this.$API.rl.GetShouQuanPaged.get(
				currentPage,
				pageSize,
				userId,
				this.searchKeyword || ''// 添加搜索参数

			);
			this.rowData = res.d || [];
			this.pagerConfig.total = res.totalCount || 0;
			this.$q.loading.hide();
		},
		// 新增分页事件处理
		handlePageChange({ currentPage, pageSize }) {
			this.pagerConfig.currentPage = currentPage;
			this.pagerConfig.pageSize = pageSize;
			this.loadData(this.user.userId);
		},
		// 新增链接格式化方法
		formatLinks(content) {
			// 高亮搜索关键词（如果存在）
			if (this.searchKeyword) {
				const regex = new RegExp(`(${this.searchKeyword})`, 'gi');
				content = content.replace(regex, '<span class="highlight">$1</span>');
			}
			return content
		},
		// 新增搜索处理（带防抖）
		handleSearch() {
			clearTimeout(this.searchTimer);
			this.searchTimer = setTimeout(() => {
				this.pagerConfig.currentPage = 1;
				this.loadData(this.user.userId);
			}, 300);
		},

	},
	computed: {

	},
	// 注册组件
	components: {
		VXETable,
		VxePager // 注册正确的分页组件
	}
}
</script>

<style lang="scss">
.highlight {
    background-color: yellow;
    font-weight: bold;
    color: #000;
    padding: 2px 4px;
    border-radius: 3px;
}
// 添加vxe-table样式
@import 'vxe-table/styles/index.scss';
</style>